
<template>
  <div class="divLatestStorage divWarehouse">
    <div class="divHead box">
      <el-form
          ref="ruleForm"
          :inline="true"
          :model="searchParams"
        >
        <el-row :gutter="30">
          <el-col :span="6">
            <el-form-item
              label="仓库"
              prop="warehouseId"
              >
              <el-select
                v-model="searchParams.warehouseId"
                clearable
                placeholder="请选择"
                style="width:100%"
                @change="warehouseChange"
              >
                <el-option
                  v-for="item in warehouseData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="库区"
              prop="areaId"
            >
              <el-select
                v-model="searchParams.areaId"
                clearable
                placeholder="请选择"
                style="width:100%"
                @change="areaChange"
                @focus="areaFocus"
              >
                <el-option
                  v-for="item in areaData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="库位"
              prop="ownerName"
            >
              <el-select
                v-model="searchParams.locationId"
                clearable
                placeholder="请选择"
                style="width:100%"
                @focus="locationFocus"
              >
                <el-option
                  v-for="item in locationData"
                  :key="item.code"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="textRight">
              <base-button
                class="minorImportantButton btnSearch"
                @click="getList"
              >搜索</base-button>
              <base-button class="unimportanceButton" @click="btnResetClick">重置</base-button>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="6">
            <el-form-item
              label="货主名称"
              prop="ownerName"
            >
                <el-input
                  placeholder="请输入"
                  v-model="searchParams.ownerName"
                  clearable
                />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="货品名称"
              prop="goodsName"
            >
                <el-input
                  placeholder="请输入"
                  v-model="searchParams.goodsName"
                  clearable
                />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
        <div class="divContent box">
        <div>
        </div>
        <div  v-if="tableData.length>0">
        <el-table
          :data="tableData"
          stripe
          border
          style="width: 100%"
          v-loading="loading"
          :header-cell-style="{ background: '#f9f6ee' }"
        >
          <el-table-column
            type="index"
            align="center"
            width="68"
            label="序号"
          />
          <el-table-column
            prop="warehouseName"
            align="center"
            label="仓库名称"
            width="160"
          />
          <el-table-column
            prop="locationCode"
            align="center"
            label="库区编号"
            width="150"
          />
          <el-table-column
            prop="areaName"
            align="center"
            label="库区名称"
            width="150"
          />
          <el-table-column
            prop="locationName"
            align="center"
            label="库位名称"
            width="160"
          />
          <el-table-column
            prop="ownerCode"
            align="center"
            label="货主编码"
            width="160"
          />
          <el-table-column
            prop="ownerName"
            align="center"
            label="货主名称"
            width="160"
          />
          <el-table-column
            prop="goodsCode"
            align="center"
            label="货品编码"
            width="160"
            sortable
          />
          <el-table-column
            prop="goodsBarCode"
            align="center"
            label="货品条码"
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="goodsName"
            align="center"
            label="货品名称"
            width="160"
            sortable
          >
          </el-table-column>
          <el-table-column
            prop="goodsUnit"
            align="center"
            label="单位"
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="total"
            align="center"
            label="总库存数"
            width="160"
            fixed="right"
          >
          </el-table-column>
          <el-table-column
            prop="free"
            align="center"
            label="可用库存"
            width="160"
            fixed="right"
          />
          <el-table-column
            prop="frozen"
            align="center"
            label="冻结库存"
            width="150"
            fixed="right"
          >
          </el-table-column>
          <el-table-column label="操作" align="center" width="100" fixed="right">
            <template slot-scope="{row}">
              <base-button class="fontOperateButton"   @click="btnStorageLogClick(row)">库存日志</base-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
      <base-pagination :total="paging.total" :limit="paging.size" @current-change="handleCurrentChange"  @size-change="handleSizeChange"></base-pagination>
      </div>
      <div
        v-else
        class="emptyTip"
      >
        <span class="imgIcon"></span>
        <p>暂无库存</p>
      </div>
    </div>
    <el-dialog title="库存日志" :visible.sync="dialogData.visible" class="divDialog">
          <div>
            <div class="divDialogHead">
              <el-form   ref="dialogRuleForm" :inline="true">
                <el-row :gutter="30">
                  <el-col :span="12">
                    <el-form-item
                      label="日期"
                      prop="dateRange"
                    >
                    <el-date-picker
                      v-model="dialogData.dateRange"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      prefix-icon="el-icon-date"
                      clearable
                      >
                    </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <div class="textRight" style="padding: 28px 0 0;">
                      <base-button
                        class="minorImportantButton btnCancle"
                        @click="getDialogList"
                      >搜索</base-button>
                      <base-button class="unimportanceButton" @click="btnDialogResetClick">重置</base-button>
                    </div>
                  </el-col>
                </el-row>
              </el-form>
              </div>
            <div  v-if="dialogData.tableData.length>0">
              <el-table
                :data="dialogData.tableData"
                stripe
                border
                style="width: 100%"
                ref="dialogTable"
                v-loading="loading"
                :header-cell-style="{ background: '#f9f6ee' }"
              >
                <el-table-column
                  type="index"
                  align="center"
                  width="68"
                  label="序号"
                />
                <el-table-column
                  prop="type"
                  align="center"
                  label="任务类型"
                  width="160"
                >
                  <template slot-scope="{row}">
                    <span v-if="row.type === 'RK'">上架</span>
                    <span v-if="row.type === 'CK'">出库</span>
                    <span v-if="row.type === 'SY'">损益</span>
                    <span v-if="row.type === 'PD'">盘点</span>
                    <span v-if="row.type === 'JH'">拣货</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="original"
                  align="center"
                  label="原始总库存"
                  width="150"
                />
                <el-table-column
                  prop="originalFree"
                  align="center"
                  label="原始可用库存"
                  width="150"
                />
                <el-table-column
                  prop="way"
                  align="center"
                  label="变动方式"
                  width="160"
                >
                <template slot-scope="{row}">
                    <span v-if="row.way === '+'">+</span>
                    <span v-if="row.way === '-'">-</span>
                    <span v-if="row.way === 'frozen'">冻结</span>
                    <span v-if="row.way === 'unfreeze'">解冻</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="alteration"
                  align="center"
                  label="操作库存"
                  width="160"
                />
                <el-table-column
                  prop="result"
                  align="center"
                  label="操作后总库存"
                  width="160"
                />
                <el-table-column
                  prop="resultFree"
                  align="center"
                  label="操作后可用库存"
                  width="160"
                />
                <el-table-column
                  prop="locationName"
                  align="center"
                  label="库位名称"
                  width="160"
                >
                </el-table-column>
                <el-table-column
                  prop="updateName"
                  align="center"
                  label="更新人员"
                  width="160"
                >
                </el-table-column>
                <el-table-column
                  prop="updateTime"
                  align="center"
                  label="更新时间"
                  width="200"
                >
                </el-table-column>
              </el-table>
              <!-- 分页 -->
              <base-pagination :total="dialogData.paging.total" :limit="dialogData.paging.size" @current-change="handleDialogCurrentChange"  @size-change="handleDialogSizeChange"></base-pagination>
            </div>
            <div
              v-else
              class="emptyTip"
            >
              <span class="imgIcon"></span>
              <p>暂无库存</p>
            </div>
        </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import BaseButton from '@/components/base-button/index.vue'
import BasePagination from '@/components/base-pagination/index.vue'
import { IStorageTableData } from '@/module-storage/interface/storage'
import { getStorageDetailPaging } from '@/module-storage/api/storage'
import { getAllWarehouse } from '@/module-base/api/warehouse'
import { getAllAreaList } from '@/module-base/api/area'
import { getAllLocationList } from '@/module-base/api/location'
import { IStorageLogTableData } from '@/module-storage/interface/storage-log'
import { findAllStorageLogPaging } from '@/module-storage/api/storage-log'

@Component({
  name: 'Warehouse',
  components: {
    BaseButton,
    BasePagination
  }
})

export default class extends Vue {
  private tableData: IStorageTableData[] = []

  private loading = false

  private paging = {
    current: 1, // 当前页码
    size: 10, // 每页数据量
    total: 0
  }

  private searchParams = {
    warehouseId: undefined,
    areaId: undefined,
    locationId: undefined,
    ownerName: '',
    goodsName: ''
  }

  private warehouseData = []

  private areaData = []

  private locationData = []

  private dialogData = {
    tableData: [] as IStorageLogTableData[],
    paging: {
      current: 1, // 当前页码
      size: 10, // 每页数据量
      total: 0
    },
    dateRange: [] as string[],
    visible: false,
    loading: false,
    locationId: 0,
    locationName: ''
  }

  @Watch('$route', { immediate: true })
  private onRouteChange() {
    this.initData()
  }

  private initData() {
    this.getList()
    this.getWarehouseData()
  }

  private getParams() {
    const current = this.paging.current
    const size = this.paging.size
    const params = {
      ...this.searchParams,
      current,
      size,
      descs: 'createTime'
    }
    if (params.warehouseId === '') {
      delete params.warehouseId
    }

    if (params.areaId === '') {
      delete params.areaId
    }

    if (params.locationId === '') {
      delete params.locationId
    }
    return params
  }

  private async getList() {
    this.loading = true
    const params = this.getParams()
    const { data } = await getStorageDetailPaging(params)
    this.loading = false
    this.tableData = data.records
    this.paging.total = parseInt(data.total, 10)
  }

  private handleCurrentChange(page:number) {
    this.paging.current = page
    this.getList()
  }

  private handleSizeChange(page:number) {
    this.paging.size = page
    this.paging.current = 1
    this.getList()
  }

  private async getWarehouseData() {
    const { data } = await getAllWarehouse({ status: 1 })
    this.warehouseData = data
  }

  private async getAreaData(id:number) {
    const { data } = await getAllAreaList({ status: 1, warehouseId: id })
    this.areaData = data
  }

  private async getLocationData(id:number) {
    const { data } = await getAllLocationList({ status: 1, areaId: id })
    this.locationData = data
  }

  private btnResetClick() {
    (this.$refs as any).ruleForm.resetFields()
    this.getList()
  }

  private btnStorageLogClick(row:IStorageTableData) {
    this.dialogData.locationId = row.locationId
    this.dialogData.locationName = row.locationName
    this.getDialogList()
  }

  private getDialogParams() {
    const dialogData = this.dialogData
    const current = dialogData.paging.current
    const size = dialogData.paging.size
    const dateRange = dialogData.dateRange && dialogData.dateRange.length > 0 ? dialogData.dateRange : []
    return {
      locationId: dialogData.locationId,
      ge_createTime: dateRange[0],
      le_createTime: dateRange[1],
      current,
      size,
      descs: 'updateTime'
    }
  }

  private async getDialogList() {
    this.dialogData.loading = true
    const params = this.getDialogParams()
    const { data } = await findAllStorageLogPaging(params)
    this.dialogData.tableData = data.records.map((item:IStorageLogTableData) => {
      item.locationName = this.dialogData.locationName
      return item
    })
    this.dialogData.paging.total = parseInt(data.total, 10)
    this.dialogData.loading = false
    this.dialogData.visible = true
  }

  private handleDialogCurrentChange(page:number) {
    this.dialogData.paging.current = page
    this.getDialogList()
  }

  private handleDialogSizeChange(page:number) {
    this.dialogData.paging.size = page
    this.dialogData.paging.current = 1
    this.getDialogList()
  }

  private btnDialogResetClick() {
    this.dialogData.dateRange = []
    this.getDialogList()
  }

  private locationFocus() {
    if (this.locationData.length === 0 && !this.searchParams.areaId) {
      this.$message.error('请先选择库区')
    }
  }

  private areaFocus() {
    if (this.areaData.length === 0 && !this.searchParams.warehouseId) {
      this.$message.error('请先选择仓库')
    }
  }

  private warehouseChange(id:number) {
    this.getAreaData(id)
  }

  private areaChange(id:number) {
    this.getLocationData(id)
  }
}
</script>
<style lang="scss"   scoped >
.divLatestStorage{
  .divHead{
    height: 215px;
  }
}
</style>
